<script setup lang="ts">
  import { StrUtil } from '@xtail/core'
  import { SIconLink } from '../SIconLink'
  import { SAnimateCss } from '../SAnimateCss'
  import { LogoProps } from './types'
  import { LogoCollapseStrategyConst } from './consts'
  // @ts-ignore
  import LogoPng from './assets/logo.png'
  // @ts-ignore
  import LogoCollapsedPng from './assets/logo-collapsed.png'

  defineOptions({
    name: 'SLogo'
  })

  withDefaults(defineProps<LogoProps>(), {
    collapse: false,
    collapseStrategy: LogoCollapseStrategyConst.CHANGE_ICON,
    icon: SIconLink,
    iconProps: {} as any,
    iconPropsCollapsed: {} as any,
    iconAnimateProps: {} as any,
    title: '',
    titleClass: '',
    titleStyle: '',
    titleProps: {} as any,
    titleAnimateProps: {} as any
  })
</script>

<template>
  <div class="s-logo">
    <slot name="icon">
      <s-animate-css
        v-if="collapseStrategy !== LogoCollapseStrategyConst.CHANGE_ICON || !collapse"
        v-bind="iconAnimateProps"
      >
        <component
          :is="icon"
          v-if="icon"
          v-bind="{
            icon: LogoPng,
            className: 's-logo__icon',
            ...iconProps
          }"
        />
      </s-animate-css>
      <s-animate-css
        v-if="collapseStrategy === LogoCollapseStrategyConst.CHANGE_ICON && collapse"
        v-bind="iconAnimateProps"
      >
        <component
          :is="icon"
          v-if="icon"
          v-bind="{
            icon: LogoCollapsedPng,
            className: 's-logo__icon--collapsed',
            ...iconPropsCollapsed
          }"
        />
      </s-animate-css>
    </slot>
    <template v-if="collapseStrategy !== LogoCollapseStrategyConst.HIDE_TITLE || !collapse">
      <slot name="title">
        <s-animate-css v-bind="iconAnimateProps">
          <div class="s-logo__title" :class="titleClass" :style="titleStyle">
            <span v-if="StrUtil.isStr(title)">{{ title }}</span>
            <component :is="title" v-else v-bind="titleProps" />
          </div>
        </s-animate-css>
      </slot>
    </template>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
